<template>
	<view class="content">
		<my-top :userName="userName" :topName="topName"></my-top>
		<view class="indexContent">
			<view style="padding-left:20rpx">
				<view class="leaveNav">
					<view style="margin-left:60rpx;font-weight: 800;font-size: 46rpx;">晚自习登记
						<view class="leaveLine"></view>
					</view>
					<button class="leaveBtn" @click="leaveBtnFun()">提交</button>
				</view>
				<view class="repDevice">
					<view>

						<view  style="display: flex; justify-content: space-between;font-size: 36rpx;">
							<view class="uni-list-cell" style="display: flex;">
								<view class="uni-list-cell-left" style="font-size: 36rpx;">
									班级
								</view>
								<!-- <picker @change="bindPickerChange($event,classArr)" class="titleInput"
									:value="index" :range="classArr">
									<view class="uni-input" style="padding-left:20rpx">{{classArr[index]}}</view>
								</picker> -->
								<!-- <input class="titleInput" style="font-size: 28rpx;padding-top: -15rpx;" placeholder="请输入班级" v-model="className" @input="showClassName" /> -->

								<view class="uni-list-cell-db">
									<view class="titleInput" style="color:#0000FE"><input placeholder="请输入班级"
											v-model="classNameNew" @input="showClassName"
											style="padding-left: 15rpx; font-size: 28rpx;" />
									</view>
								</view>

								<uni-popup ref="popup" type="bottom">
									<view class="Popup">
										<view
											style="display: flex;justify-content: center;align-items: center; border-bottom: 0.1px solid #e9e9e9;margin: 10rpx;padding: 10rpx;">
											请选择班级</view>
										<view @click="bindPickerChange(item)" v-for="item in arrNew"
											style="display: flex;justify-content: center;align-items: center; border-bottom: 0.1px solid #e9e9e9;margin: 10rpx;padding: 10rpx;">
											{{item.className}}
										</view>
									</view>
								</uni-popup>



								<view class="uni-list-cell-left" style="font-size: 36rpx;margin-left:30rpx;">
									时间
								</view>
								<view class="uni-list-cell-db">
									<view class="titleInput" style=" font-size: 28rpx; padding-left:20rpx;color:#0000FE">{{dateTime}}
									</view>
								</view>
							</view>
						</view>
					</view>

				</view>


				<view class="repDevice" style="margin-top: 30rpx; margin-bottom: 30rpx;">

					<view style="display: flex; justify-content: space-between;font-size: 36rpx;">
						<view style="width:500rpx"> 应到人数{{total}}人</view>
						<view style="width:550rpx">
							请假人数{{leave}}人
						</view>
					</view>
				</view>

				<view class="repDevice" style="margin-top: 30rpx; margin-bottom: 30rpx;">

					<view style="display: flex; justify-content: space-around;">
						<view style="width:500rpx"> 实到人数</view>
						<view style="display: flex; width:460rpx;margin-right:60rpx;">
							<view>
								<view style="width: 150rpx;border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;"><input v-model="actArriveNum" placeholder="请输入" />
								</view>
							</view>
							<view > 人</view>
						</view>
					</view>
				</view>




				<view style="margin: 20rpx 0rpx 20rpx 25rpx;display: flex;">
					<view class="uni-title" style="color:#8F8F94;">短信通知班主任</view>
					<view style="margin-left: 90rpx;">
						<radio-group @change="radioChange">
							<label v-for="(item,index) in items" :key="item.value" style="margin-left: 10rpx;">
								<radio :value="item.value" :checked="index === currents" />
								<text>{{item.name}}</text>
							</label>
						</radio-group>
					</view>
				</view>
				<view class="repDevice" style="margin-bottom: 30rpx;">详细记录</view>
				<textarea class="repText" v-model="repairDesc" placeholder="备注信息"></textarea>
				<view class="repDevice" style="margin-top:50rpx;">拍照</view>
				<view>
					<view class="repDevice" style="position: relative;top:180rpx;left:230rpx">上传照片</view>
					<image @click="chooseImage" :src="imgShow" class="imgSty" mode=""></image>
				</view>
				<view class="logoSty" style="margin-left:-20rpx"></view>
			</view>

		</view>
		<!-- 		<my-bottom :topName="topName" :bottomArr="userName!='部门经理'?attendanceTecArr:attendanceArr"
			:bottomName="bottomName"></my-bottom> -->


		<!-- <bottom-com :topName="topName" :bottomArr="userName!='部门经理'?attendanceTecArr:attendanceArr" :bottomName="bottomName"></bottom-com> -->
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/utils/index.js'
	import topCom from '@/pages/component/topCom.vue'
	import bottomCom from '@/pages/component/bottom.vue'
	import * as imageConversion from 'image-conversion'
	export default {
		name: 'leaveManagement',
		data() {
			return {
				actArriveNum: '', //实到人数
				total: 0, //总人数
				leave: 0, //请假人数
				file: {},
				count: 0,
				attendanceTecArr: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "违纪",
						path: '/pages_main/dutyCheckWorkAttendance/dutyTecIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages_main/dutyCheckWorkAttendance/dutyTecIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages_main/dutyCheckWorkAttendance/dutyTecIndex'
					}
				],
				attendanceArr: [{
						name: 'home',
						icon: 'iconfont icon-yonghutongji',
						text: "考勤",
						path: '/pages_main/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					},
					{
						name: 'atttendance',
						icon: 'iconfont icon-bi',
						text: "统计",
						path: '/pages_main/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					},
					{
						name: 'maintenance',
						icon: 'iconfont icon-shezhi',
						text: "设置",
						path: '/pages_main/dutyCheckWorkAttendance/dutyIndex/dutyIndex'
					}
				],
				bottomName: 'home',
				stuNo: "",
				index1: 0,
				repairDesc: "",
				className: '',
				classNameArr: [],
				index: 0,
				classArr: ['261', '265', '268'],
				stuName: "",
				imgShow: '',
				userName: '',
				studentList: [],
				leaveDaysArray: [],
				type: '优秀',
				phoneArray: [],
				studentNoArray: [],
				patrolImg: '',
				topName: "晚自习巡查",
				time: '',
				schoolDv: [{
					id: 10,
					title: "携带外卖",
					isShow: false,
				}, {
					id: 11,
					title: "校园抽烟",
					isShow: false,
				}, {
					id: 12,
					title: "打架斗殴",
					isShow: false,
				}, {
					id: 13,
					title: "饮酒酗酒",
					isShow: false,
				}, {
					id: 14,
					title: "打牌赌博",
					isShow: false,
				}, {
					id: 15,
					title: "翻爬围墙",
					isShow: false,
				}, {
					id: 16,
					title: "谩骂他人",
					isShow: false,
				}, {
					id: 17,
					title: "携带违禁品",
					isShow: false,
				}, {
					id: 6,
					title: "其他",
					isShow: false,
				}, ],
				dvType: 0,
				classId: 0,
				classList: "",
				photo: [],
				roleName: '',
				current: '',
				dateTime: '',
				dataList: '',
				dutyDept: 1,
				currents: 0,
				items: [{
					value: '0',
					name: '否'
				}, {
					value: '1',
					name: '是'
				}, ],
				isInformCharge: '0',
			}
		},
		mounted() {
			this.current = setInterval(() => {
				var myDate = new Date();
				var hour = myDate.getHours();
				var min = myDate.getMinutes();
				var sen = myDate.getSeconds();
				var str = "上午 ";

				if (hour > 12) {
					str = "下午 "
				}
				str += hour + ":" + min + ":" + sen
				this.dateTime = str;
			}, 1000)

			this.getAllAppClassList()
		},
		onShow() {


			var that = this
			uni.getStorage({
				key: 'loginName',
				success(res) {
					that.userName = res.data

				}
			})
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					that.roleName = res.data
				}
			})
			uni.getStorage({
				key: 'dutyDept',
				success: (res) => {
					that.dutyDept = res.data
				}
			})


		},
		components: {
			topCom,
			bottomCom
		},
		computed: {

		},
		beforeDestroy() {
			clearInterval(this.current)
			clearInterval(this.time)
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value == evt.target.value) {
						this.currents = i;
						break;
					}
				}
				this.isInformCharge = this.currents
				console.log(this.isInformCharge, 988)
			},
			reduce() {
				if (this.count < 1) {
					uni.showToast({
						title: '数值不能小于0',
						icon: "none"
					})
					return;
				} else {
					this.count = this.count - 1
				}
			},
			plus() {
				if (this.count > 80) {
					uni.showToast({
						title: '数值不能大于80',
						icon: "none"
					})
					return;
				} else {
					this.count = this.count + 1
				}
			},
			contFun(e) {
				this.count = e.detail.value
				if (this.count < 0 || this.count > 80) {
					uni.showToast({
						title: "请输入正确的人数",
						icon: "none"
					})
					this.count = 0
				}
			},
			healthSlec(index) {
				if (index == 1) {
					this.type = "优秀"
				} else if (index == 2) {
					this.type = "良好"
				} else {
					this.type = "差"
				}
			},
			getClassStuListByClassId(className) {
				this.$api.instructor.getClassStuListByClassId(className).then(res => {
					var classNameList = res.data
					this.studentList = res.data
					this.classNameArr = []
					if (res.data.length > 0) {
						classNameList.forEach((item, index) => {
							this.classNameArr.push(item.studentName)
						})
						this.stuNo = this.studentList[this.index1].studentNo
						// this.$forceUpdate()
					}

				})
			},
			bindPickerChange(item) {
				// alert(item.classId)
				this.classId = item.classId;
				this.getClassStuListByClassId(item.classId)
				this.classNameNew = item.className;
				this.$refs.popup.close();
				this.$forceUpdate()


				uni.request({
					url: uni.url + "Class/getBoardingStuCountByClassId?classId=" + this.classId,
					success: res => {
						console.log(res);
						this.total = res.data.data;

					}
				})

				uni.request({
					url: uni.url + "Class/getLeaveStuCountByClassId?classId=" + this.classId,
					success: res => {
						console.log(res);
						this.leave = res.data.data;
					}
				})


			},
			bindPickerChangeName(e, item) {
				this.index1 = e.target.value
				console.log(this.index1, "index")
				this.stuNo = this.studentList[this.index1].studentNo
			},

			leaveBtnFun() {
				if (this.classId == '' || this.actArriveNum=='') {
					uni.showToast({
						title: "请填写完整信息后提交",
						icon: "none"
					})
				} else {
					uni.showLoading({
						title: "正在提交",
						mask: true
					})
					this.createInstructorRecordDv()
				}
				// this.createInstructorRecordDv()
				// uni.navigateTo({
				// 	url:"/pages/instructor/historyList"
				// })
			},
			getAllAppClassList() {
				if (this.roleName == '部门经理') {
					this.$api.instructor.getAllAppClassList().then(res => {
						this.dataList = res.data
						this.classArr = []
						this.dataList.forEach((item, index) => {
							this.classArr.push(item.className)
						})
						this.classList = res.data
						this.getClassStuListByClassId(this.dataList[this.index].classId)
						this.$forceUpdate()
					})
				} else {
					this.$api.duty.getClassListByDept(this.dutyDept).then(res => {
						this.dataList = res.data
						this.classArr = []
						this.dataList.forEach((item, index) => {
							this.classArr.push(item.className)
						})
						this.classList = res.data
						this.getClassStuListByClassId(this.dataList[this.index].classId)
						this.$forceUpdate()
					}).catch(e => {

					})
				}
			},

			// dvDate,classId,dvType,studentNo,dvDesc,dvArea,createBy,upload
			createInstructorRecordDv() {


				var date = new Date();
				var year = date.getFullYear();
				var month = date.getMonth() + 1;
				month = month < 10 ? '0' + month : month;
				var day = date.getDate();
				day = day < 10 ? '0' + day : day;

				var hour = date.getHours();
				hour = hour < 10 ? '0' + hour : hour;
				var min = date.getMinutes();
				min = min < 10 ? '0' + min : min;
				var sed = date.getSeconds();
				sed = sed < 10 ? '0' + sed : sed;

				var str = year + '-' + month + "-" + day + " " + hour + ":" + min + ":" + sed;
				var data = {
					"classId": this.classId,
					"patrolType": "5",
					"patrolTime": str,
					"classPatrolJson": "{\"actArriveNum\":"+this.actArriveNum+"}" ,
					"describeTxt": this.repairDesc,
					"isInformCharge": this.isInformCharge,
					"patrolImg": "",
					"createBy":this.userName
				}
				if (!this.imgShow) {
					uni.request({
						url: uni.url + 'duty/createOrUpdatePatrolInfo',
						data,
						success: res => {
							console.log(res);
							if (res.data.code == 200) {
								uni.showToast({
									title: '操作成功',

								})

								setTimeout(() => {
									uni.navigateTo({
										url: '/pages_main/dutyCheckWorkAttendance/dutyAttendanceNightList'
									})
								}, 1000)


							} else {
								uni.showToast({
									title: '操作失败',
									icon: "none"
								})
							}
						},
						method: 'post'
					})

				} else {
					uni.uploadFile({
						url: uni.url + "common/uploadFile",
						name: 'file',
						filePath: this.imgShow,
						success: res => {
							data.patrolImg = JSON.parse(res.data).data;
							uni.request({

								url: uni.url + 'duty/createOrUpdatePatrolInfo',

								data,

								success: res => {

									console.log(res);

									if (res.data.code == 200) {

										uni.showToast({

											title: '操作成功',



										})



										setTimeout(() => {

											uni.navigateTo({

												url: '/pages_main/dutyCheckWorkAttendance/dutyAttendanceNightList'

											})

										}, 1000)





									} else {

										uni.showToast({

											title: '操作失败',

											icon: "none"

										})

									}

								},

								method: 'post'

							})
							// this.$api.duty.createOrUpdatePatrolInfoMoon(this.classId,
							// 	classPatrolJson, 4, this.repairDesc, JSON.parse(res.data).data,
							// 	patrolStatus, this.roleName, this.isInformCharge).then(res => {
							// 	uni.showToast({
							// 		title: '操作成功',

							// 	})
							// 	setTimeout(() => {
							// 		uni.navigateTo({
							// 			url: '/pages/dutyCheckWorkAttendance/dutyMoonAttendanceStatus'
							// 		})
							// 	}, 1000)



							// })



						}

					})

				}



			},
			checkFun(item) {
				// item.isShow=!item.isShow				
				// if(item.title=="其他"){
				// 	this.schoolDv.forEach((i,index)=>{
				// 		i.isShow = false
				// 	})
				// 	item.isShow = true
				// }
				this.schoolDv.forEach((i, index) => {
					i.isShow = false
				})
				item.isShow = true
				this.dvType = item.id

			},
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: async res => {

						this.imgShow = res.tempFilePaths[0]; //500kb
						this.file = await imageConversion.compressAccurately(res.tempFiles[0], 500)

					}

				})
				// var _this = this
				// uni.chooseImage({
				// 	count:1,
				// 	sizeType:['original','compressed'],
				// 	sourceType:['album','camera'],
				// 	success:function(res){
				// 		_this.imgShow = res.tempFilePaths[0]
				// 		pathToBase64(res.tempFilePaths[0])
				// 		  .then(base64 => {						  
				// 			_this.imgShow = base64
				// 		  })
				// 		  .catch(error => {
				// 		    console.error(error)
				// 		  })						

				// 	}
				// })
			}



		},

	}
</script>

<style>
	* {
		color: '#0000FE';

	}

	.attBtnFontSlec {
		border: solid #007AFF !important;
		border-radius: 15upx;
		font-size: 32rpx;
		color: white !important;
		background-color: #007AFF;
	}

	.attLine {
		width: 640rpx;
		height: 2rpx;
		background: #C0C0C0;
		position: relative;
		bottom: -20rpx;
		left: 10rpx;
	}

	.clearBtn {
		width: 160rpx;
		border-radius: 10rpx;
		font-size: 32rpx;
		color: #0000FF;
		text-align: center;
		border: 1px solid #0000FF;
		line-height: 60rpx !important;
	}

	.checkBg {
		background-color: #007AFF;
		color: white;
	}

	.imgSty {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 630rpx;
		height: 300upx;
		margin: auto;
		padding: 10upx;
		margin-left: 15rpx;
		margin-top: 0rpx
	}

	.repText {
		border: solid 1upx #999999;
		border-radius: 20upx;
		width: 630rpx;
		height: 150upx;
		margin: auto;
		padding: 10upx;
		margin-left: 15rpx;
	}

	.repCheckout {
		display: flex;
		justify-content: space-between;
		align-content: center;
		flex-wrap: wrap;
		font-size: 28upx;
		color: #8F8F94;
		margin-top: 30upx;
		width: 80%;
		margin-left: 50upx;
	}

	.repDevice {
		text-align: left;
		font-size: 36rpx;
		color: #8F8F94;
		padding-left: 25rpx;
	}

	.titleInput {
		border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;
		width: 196rpx;
		height: 50rpx;

		color: #999999;
		padding-top: 5rpx;
		margin-left: 18rpx;
		/* text-align:  center; */
	}

	.schoolTitle {
		width: 660rpx;
		display: flex;
		justify-content: space-around;
		align-content: space-around;
		color: #999999;
		font-size: 28rpx;
		margin-left: 10rpx;
	}

	.repCheckout {
		display: flex;
		justify-content: space-between;
		align-content: center;
		flex-wrap: wrap;
		font-size: 28upx;
		color: #8F8F94;
		margin-top: 30upx;
		/* width:80%; */
		width: 590rpx;
		margin-left: 38rpx;
	}

	.delSty {
		height: 40rpx;
		background-color: red;
		padding: 0 2rpx;
		color: white;
		border: red solid 1rpx;
		border-radius: 10rpx;
	}

	.delCancel {
		height: 40rpx;
		background-color: #C0C0C0;
		padding: 0 2rpx;
		color: white;
		border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;
	}

	.isSlect {
		color: red;
	}

	.dateTimeNav {
		display: flex;
		justify-content: space-around;
		align-content: space-between
	}

	.dateTimeNavTitle {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		width: 400rpx;
	}

	.dateTimeNavTitleInput {
		display: inline-block;
	}

	.timePos {
		position: relative;
		top: 0rpx;
		right: -15rpx;
		background: white;
		border: 1rpx solid #cccc;
		border-radius: 20rpx;
		padding: 20rpx;
		width: 90%;
		text-align: center;
		margin-bottom: 20rpx;
	}

	.fontLeave {
		display: flex;
		justify-content: flex-end;
		align-content: center;
	}

	.checkbox {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
		flex-direction: row;
	}

	.leaveNum {
		width: 30rpx;
		height: 50rpx;
		border: #cccc solid 1rpx;
		border-radius: 10rpx;
		padding-left: 10rpx;
		font-size: 24rpx;
	}

	.leaveNav {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: row;
		font-size: 36upx;
		color: blue;
		width: 100%;
		padding: 50upx
	}

	.leaveBtn {
		background-image: url(https://tj-1305380059.cos.ap-nanjing.myqcloud.com/pic/tubiao-01.png);
		background-size: 100%;
		width: 220upx;
		height: 70upx;
		color: white;
		font-size: 32rpx;
		font-weight: 0;
		line-height: 70rpx;
	}

	.leaveLine {
		width: 220upx;
		height: 8upx;
		background: rgba(239, 220, 11, 1.0);
		opacity: 0.78;
		position: relative;
		bottom: -10upx;
		left: -20rpx;
	}

	.leaveMgm {
		color: #8F8F94;
		font-size: 28upx;

	}

	.leaveCheck {
		/* margin-left:60upx; */
		margin-bottom: 30rpx;
		width: 150rpx;
		height: 50rpx;
		border: #C0C0C0 solid 1rpx;
		border-radius: 10rpx;
		text-align: center;
		line-height: 50rpx;
		font-size: 30rpx;
		padding: 0 10rpx;

	}

	.checkout {
		display: flex;
		justify-content: space-around;
		align-content: space-between;
	}

	.leaveTabLine {
		width: 3upx;
		height: 60upx;
		background: #8F8F94;
		opacity: 0.78;
		position: relative;
		top: 0upx;
		left: 150upx;
	}
</style>
